<!DOCTYPE html>
<html>
<head>
    <title>智能客服</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="木兰湾管理系统">
    <script type="text/javascript" src="../../static/include/header-css.js"></script>
    <link rel="stylesheet" type="text/css" href="../../static/css/litewebchat.min.css" />
</head>
<body>
<div id="resDiv" style="overflow-y: auto;width:auto;height: calc(100% - 55px);">
    <div class="lite-chatbox" id="res">
    </div>
</div>
<!--查询条件-->
<div >
    <div class="weui-cell mulanbay_select-before weui-footer_fixed-bottom">
        <div class="weui-cell__bd border-t w">
            <input class="weui-input" type="text" placeholder="请输入..." name="content" id="content" onKeyDown="if(event.keyCode==13){sendCsText();}">
        </div>
        <div class="weui-cell__hd ">
            <a href="javascript:sendCsText()" class="weui-btn weui-btn_mini weui-btn_primary">发送</a>
            <a href="javascript:clearCs()" class="weui-btn weui-btn_mini weui-btn_warn">清空</a>
        </div>
    </div>
</div>
<script type="text/javascript" src="../../static/include/footer-js.js"></script>
<script>
    var key = 'cs_cache';
    $(function() {
        var his = localStorage.getItem(key);
        $("#res").append(his);
        showResBottom();
    });
    function sendCsText() {
        var para = {
            content: $('#content').val(),
            source:'PC'
        };
        var userHtml = generateUserMessage($('#content').val());
        $("#res").append(userHtml);
        appendCache(userHtml);
        var url='/qaConfig/textReq';
        doAjax3(para,url,'POST',false,false,true,function(data){
            var cc;
            if(isStrEmpty(data.res)){
                cc='无法处理您的请求!';
            }else{
                //替换换行符，默认是给微信消息用的\n换行符
                cc = data.res.replace(/[\n\r]/g,'<br>');
            }
            var csHtml = generateCsMessage(cc);
            $("#res").append(csHtml);
            $('#content').val(null);
            appendCache(csHtml);
            showResBottom();
        });
    }
    function generateUserMessage(content) {
        var html='<div class="cright cmsg">';
        html+='<img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="../../static/image/user.png" />';
        html+='<span class="name">您</span>';
        html+='<span class="content">'+content+'</span>';
        html+='    </div>\n';
        return html;
    }
    function generateCsMessage(content) {
        var html='<div class="cleft cmsg">';
        html+='<img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="../../static/image/cs.png" />';
        html+='<span class="name">木兰湾客服</span>';
        html+='<span class="content">'+content+'</span>';
        html+='    </div>\n';
        return html;
    }
    function showResBottom() {
        //滚动条加载到底部
        var div = document.getElementById('resDiv');
        div.scrollTop = div.scrollHeight;
    }
    function clearCs() {
        $('#content').val(null);
        setElementInnerHTML('res',null);
        localStorage.setItem(key, '');
    }
    function appendCache(s) {
        var his = localStorage.getItem(key);
        if(his==null){
            his='';
        }
        var newValue = his+s;
        localStorage.setItem(key, newValue);
    }
</script>
</body>
</html>